<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#but1").click(function () {
                $("p").append("<b>Appended text</b>>")
            })
            $("#but3").click(function () {
                $("p").prepend("<b>我跑前面了</b>")
            })
            $("#but2").click(function () {
                $("ol").append("<li>Appended item</li>")
            })
            $("#but4").click(function () {
                $(".tu").before("我在前面出现")
            })
            $("#but5").click(function () {
                $(".tu").after("我在后面出现")
            })
        })
    </script>
</head>
<body>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>
<img class="tu" src="img.png" alt="图片">
<br>
<button id="but1">追加文本</button>
<button id="but3">在前面追加文本</button>
<button id="but2">追加列表项</button>
<br>
<button id="but4">图片前</button>
<button id="but5">图片后</button>
</body>
</html>